<template>
	<view class="task-list">
		<!-- 顶部刷新区域 -->
		<view class="refresh-bar" @click="refreshList">
			<uni-icons type="refresh" size="20"></uni-icons>
			<text class="refresh-text">刷新列表</text>
		</view>

		<!-- 空状态展示 -->
		<el-empty 
			description="暂无任务" 
			v-if="taskList.length <= 0"
			:image-size="120">
		</el-empty>

		<!-- 任务列表 -->
		<view class="task-list__container" v-else>
			<view class="task-card" v-for="(item) in taskList" :key="item.id">
				<!-- 状态标签 -->
				<view class="task-card__status" :class="getStatusClass(item.status)">
					{{ getStatusStr(item.status) }}
				</view>

				<!-- 任务信息 -->
				<view class="task-card__content">
					<!-- 基本信息 -->
					<view class="info-group">
						<view class="info-item">
							<text class="label">导游名称：</text>
							<text class="value">{{ item.taskData[0].contact }}</text>
						</view>
						<view class="info-item">
							<text class="label">导游手机号：</text>
							<text class="value">{{ item.taskData[0].contactNumber }}</text>
						</view>
						<view class="info-item">
							<text class="label">导游身份证：</text>
							<text class="value">{{ item.qtObj.customerIdCard }}</text>
						</view>
						<view class="info-item">
							<text class="label">抢票时间：</text>
							<text class="value highlight">{{ formatDateTime(item.taskData[0].teamAppointmentItemParamList[0].planDay, item.timing) }}</text>
						</view>
					</view>

					<!-- 文件链接 -->
					<view class="file-links">
						<view class="file-item" v-for="(file, idx) in getFileLinks(item)" :key="idx">
							<uni-icons :type="file.icon" size="18"></uni-icons>
							<a class="file-link" :href="file.url" target="_blank">{{ file.label }}</a>
						</view>
					</view>

					<!-- 操作按钮 -->
					<view class="task-card__actions">
						<el-button 
							type="danger" 
							size="small" 
							@click="confirmDelete(item)"
							:loading="deleteLoading === item.id">
							删除任务
						</el-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getTaskList, delTask } from '@/api/http/myNodeIndex.js';

export default {
	data() {
		return { 
			dataInfo: '',
			taskList: [],
			deleteLoading: null,
			refreshing: false
		};
	},

	onLoad(e) {
		this.dataInfo = JSON.parse(decodeURIComponent(e.data));
		this.init(this.dataInfo.id);
	},

	methods: {
		// 刷新列表
		async refreshList() {
			if (this.refreshing) return;
			this.refreshing = true;
			try {
				await this.init(this.dataInfo.id);
				uni.showToast({
					title: '刷新成功',
					icon: 'success'
				});
			} catch (error) {
				uni.showToast({
					title: '刷新失败',
					icon: 'error'
				});
			} finally {
				this.refreshing = false;
			}
		},

		// 确认删除
		confirmDelete(item) {
			uni.showModal({
				title: '确认删除',
				content: '是否确认删除该任务？',
				success: async (res) => {
					if (res.confirm) {
						await this.handleDelete(item);
					}
				}
			});
		},

		// 处理删除
		async handleDelete(item) {
			this.deleteLoading = item.id;
			try {
				const res = await delTask({ taskId: item.id });
				if (res.code === 1) {
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
					await this.init(this.dataInfo.id);
				} else {
					uni.showToast({
						title: res.msg || '删除失败',
						icon: 'error'
					});
				}
			} catch (error) {
				uni.showToast({
					title: '操作失败',
					icon: 'error'
				});
			} finally {
				this.deleteLoading = null;
			}
		},

		// 获取状态样式
		getStatusClass(status) {
			const statusMap = {
				0: 'status-waiting',
				1: 'status-success',
				2: 'status-failed'
			};
			return statusMap[status] || '';
		},

		// 获取状态文字
		getStatusStr(status) {
			const statusMap = {
				0: '等待中',
				1: '抢票成功',
				2: '抢票失败'
			};
			return statusMap[status] || '未知状态';
		},

		// 格式化日期时间
		formatDateTime(date, time) {
			return `${date} ${time}`;
		},

		// 获取文件链接配置
		getFileLinks(item) {
			return [
				{
					label: '游客名单',
					url: item.taskData[0].teamAppointmentItemParamList[0].visitorInformationFileUrl,
					icon: 'staff'
				},
				{
					label: '行程单',
					url: item.taskData[0].application_file_url,
					icon: 'calendar'
				},
				{
					label: '导游证',
					url: item.taskData[0].instructions_prove_fileUrl,
					icon: 'idcard'
				},
				{
					label: '讲解词',
					url: item.taskData[0].explanationFileUrl,
					icon: 'chat'
				}
			];
		},

		// 初始化数据
		async init(id) {
			try {
				this.taskList = [];
				const res = await getTaskList({ userId: id });
				this.taskList = res.data.map(item => {
					const qtObj = JSON.parse(item.taskData);
					const taskDataObj = JSON.parse(JSON.parse(item.taskData).data);
					return { ...item, taskData: taskDataObj, qtObj: qtObj };
				});
			} catch (error) {
				console.error('获取任务列表失败:', error);
				uni.showToast({
					title: '获取数据失败',
					icon: 'error'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../uni.scss';

.task-list {
	padding: 20rpx;

	.refresh-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		background: #f8f9fa;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		cursor: pointer;
		transition: all 0.3s;

		&:active {
			background: #e9ecef;
		}

		.refresh-text {
			margin-left: 10rpx;
			color: #666;
		}
	}

	&__container {
		.task-card {
			position: relative;
			padding: 30rpx;
			border-radius: 16rpx;
			background: #fff;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
			margin-bottom: 30rpx;
			border: 2rpx solid #f0f0f0;
			transition: all 0.3s;

			&:hover {
				transform: translateY(-2rpx);
				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
			}

			&__status {
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				padding: 4rpx 16rpx;
				border-radius: 30rpx;
				font-size: 24rpx;

				&.status-waiting {
					background: rgba($uni-theme-color, 0.1);
					color: $uni-theme-color;
				}

				&.status-success {
					background: #f6ffed;
					color: #52c41a;
				}

				&.status-failed {
					background: #fff1f0;
					color: #f5222d;
				}
			}

			&__content {
				.info-group {
					margin-bottom: 30rpx;

					.info-item {
						margin-bottom: 16rpx;
						display: flex;
						align-items: center;

						.label {
							color: #666;
							min-width: 160rpx;
						}

						.value {
							color: #333;
							
							&.highlight {
								color: $uni-theme-color;
								font-weight: 500;
							}
						}
					}
				}

				.file-links {
					display: flex;
					flex-wrap: wrap;
					gap: 20rpx;
					margin-bottom: 30rpx;

					.file-item {
						display: flex;
						align-items: center;
						padding: 10rpx 20rpx;
						background: #f5f5f5;
						border-radius: 8rpx;

						.file-link {
							margin-left: 10rpx;
							color: $uni-theme-color;
							text-decoration: none;

							&:hover {
								text-decoration: underline;
							}
						}
					}
				}
			}

			&__actions {
				display: flex;
				justify-content: flex-end;
				margin-top: 20rpx;
			}
		}
	}
}
</style>
